<template>
  <div v-loading="loading" class="tab_content">
    <div class="infinite-list-panel">
      <div class="infinite-list">
        <!-- 这里触发组件同步更新必须更改key的值为可变 -->
        <div
          class="list-item"
          v-for="item in formData.SearchDataList"
          :key="item.post_id + Math.random() * 100"
        >
          <PostList @reloadDataList="loadingSearchData" :postData="item" />
        </div>
      </div>
      <p class="loading" v-if="formData.loading">
        {{ $t("postlist.loading") }}
      </p>
      <p class="addload" v-if="!noMore" @click="addloadingData">
        {{ $t("postlist.clickaddmore") }}
      </p>
      <p class="nomore" v-if="noMore">{{ $t("postlist.nomore") }}</p>
    </div>
  </div>
</template>
<script>
import PostList from "@/components/PostList.vue";
//获取统一请求接口
import { getPostSearchDataMapperByQuery } from "@/api";

export default {
  name: "SearchTabContent4",
  components: {
    PostList,
  },
  props: {
    query: String,
    msg: String,
  },
  data() {
    return {
      loading: true,
      formData: {
        query: this.query ? this.query : "",
        currentPage: 1, //起始页数值为1
        loading: false,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        //测试数据
        SearchDataList: [],
      },
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.formData.currentPage >= this.formData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },
  mounted() {
    this.loadingSearchData();
  },
  methods: {
    async loadingSearchData() {
      if (!this.query) {
        this.loading = false;
        return;
      }

      let res = await getPostSearchDataMapperByQuery(this.formData);
      if (res.state == 200) {
        // console.log(res.data);
        this.formData.SearchDataList = res.data.data;
        this.formData.pageTotal = res.data.pageTotal;
        this.formData.loading = false;
        this.loading = false;
      } else {
        this.loading = false;
      }
    },

    async addloadingData() {
      this.formData.loading = true;
      // setTimeout(() => {
      this.formData.currentPage += 1; //页数+1
      this.getPostSearchDataMapperByQuery(); //调用接口，此时页数+1，查询下一页数据
      // }, 500);
    },
    //加载更多
    async getPostSearchDataMapperByQuery() {
      let params = {
        query: this.query,
        currentPage: this.formData.currentPage,
        pageSize: this.formData.pageSize, //每页查询条数
      };
      let res = await getPostSearchDataMapperByQuery(params);
      // console.log(res.data);
      if (res.state == 200) {
        //存放数据的列表累加
        this.formData.SearchDataList = this.formData.SearchDataList.concat(
          res.data.data
        );
        this.formData.pageTotal = res.data.pageTotal;
        this.formData.loading = false;
      }
    },
  },
  //监听外部参数实时更新子组件内部变量
  watch: {
    query: {
      handler(newValue, oldValue) {
        this.formData.query = newValue;
        // console.log("搜索结果变更为：" + newValue);
      },
      immediate: true,
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab_content {
  display: flex;
}
.hots_panel {
  width: 100%;
  padding: 10px 10px;
}

/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
  width: 100%;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}
</style>